{% extends 'user/user_order.html' %}
{% load static %}
{% block title %}订单评价{% endblock title %}
{% block page_title %}订单评价{% endblock page_title %}
{% block haed_files %}
    <link rel="stylesheet" href="{% static 'css/modal_alert.css' %}">
    <style type="text/css">
		#qq {
			width: 600px;
			/*宽*/
			height: 170px;
			/*高*/
			background: #fff;
			/*背景颜色*/
			margin: 0 0 0 5%;
			border-radius: 5px;
			/*Html5 圆角*/
		}

		#qq p {
			font-size: 12px;
			color: #666;
			font-family: "微软雅黑";
			text-indent: 20px;
		}

		#qq .message {
			width: 560px;
			height: 70px;
			margin: 0 auto;
			overflow: hidden;
			outline: none;
			border: 1px solid #ddd;
			padding: 8px;
			box-sizing: border-box;
			font-size: 14px;
			-webkit-background-clip: text;
			background-image: linear-gradient(to right, #778899 0%, #333 100%);
			/*粗细 风格 颜色*/
		}

        #qq .message img{
            width:initial;
        }

		#qq .But {
			width: 560px;
			height: 35px;
			margin: 15px auto 0px;
			position: relative;
			/*相对，参考对象*/
		}

		#qq .But img.bq {
			float: left;
			/*左浮动*/
            width:initial;
		}

		span.submit {
			width: 80px;
			height: 30px;
			background: #ff8140;
			display: block;
			float: right;
			/*右浮动*/
			line-height: 30px;
			border-radius: 5px;
			cursor: pointer;
			/*手指*/
			color: #fff;
			font-size: 12px;
			text-align: center;
			font-family: "微软雅黑";
            margin:20px 20px 0 0;
            transition: all 0.3s ease;
		}

        span.submit:hover{
            background-color: #de4307;
        }

		/*face begin*/
		#qq .But .face {
			width: 440px;
			background: #fff;
			border: 1px solid #ddd;
			box-shadow: 0 0 12px #666;
			position: absolute;
			/*绝对定位*/
			top: 21px;
			left: 15px;
			display: none;
			/*隐藏*/
		}

		#qq .But .face ul {
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 8px;
			box-sizing: border-box;
		}

		#qq .But .face ul li {
			width: 30px;
			height: 30px;
			list-style-type: none;
			cursor: pointer;
			display: flex;
			justify-content: center;
			align-items: center;
		}

        #qq .But .face ul li img{
            margin:0;
        }

	</style>
{% endblock haed_files %}
{% block comment_title %}订单评价{% endblock comment_title %}
{% block comment_order %}
    <li data-order-id="{{order.order_id}}">
        <div class="info">
            <span>{{order.create_time}}</span>
            <span>订单号：{{order.order_id}}</span>
            <span>{{order.status_name}}</span>
        </div>
        <div class="goods">
            <ul>
                {% for goods in order.order_goods_list %}
                    <li data-sku-id={{goods.sku.id}}>
                        <a href="{% url 'goods:detail' goods.sku.id %}"
                            ><img src="{{goods.sku.image.url}}" alt=""
                        /></a>
                        <a href="{% url 'goods:detail' goods.sku.id %}">{{goods.sku.name}}</a>
                        <span>{{goods.price}}元/{{goods.sku.unite}}</span>
                        <div class="num">{{goods.count}}</div>
                        <div class="price">{{goods.amount}}元</div>
                    </li>
                    <div id="qq">
                        <p>对此产品您有什么想说的呢？</p>
                        <div class="message" contentEditable='true'></div>
                        <div class="But">
                            <img src="{% static 'image/emojies/bba_thumb.gif' %}" class='bq' />
                            <!--face begin-->
                            <div class="face">
                                <ul>
                                    <li><img src="{% static 'image/emojies/smilea_thumb.gif' %}" title="呵呵]"></li>
                                    <li><img src="{% static 'image/emojies/tootha_thumb.gif' %}" title="嘻嘻]"></li>
                                    <li><img src="{% static 'image/emojies/laugh.gif' %}" title="[哈哈]"></li>
                                    <li><img src="{% static 'image/emojies/tza_thumb.gif' %}" title="[可爱]"></li>
                                    <li><img src="{% static 'image/emojies/kl_thumb.gif' %}" title="[可怜]"></li>
                                    <li><img src="{% static 'image/emojies/kbsa_thumb.gif' %}" title="[挖鼻屎]"></li>
                                    <li><img src="{% static 'image/emojies/cj_thumb.gif' %}" title="[吃惊]"></li>
                                    <li><img src="{% static 'image/emojies/shamea_thumb.gif' %}" title="[害羞]"></li>
                                    <li><img src="{%static 'image/emojies/zy_thumb.gif'%}" title="[挤眼]"></li>
                                    <li><img src="{%static 'image/emojies/bz_thumb.gif'%}" title="[闭嘴]"></li>
                                    <li><img src="{%static 'image/emojies/bs2_thumb.gif'%}" title="[鄙视]"></li>
                                    <li><img src="{%static 'image/emojies/lovea_thumb.gif'%}" title="[爱你]"></li>
                                    <li><img src="{%static 'image/emojies/sada_thumb.gif'%}" title="[泪]"></li>
                                    <li><img src="{%static 'image/emojies/heia_thumb.gif'%}" title="[偷笑]"></li>
                                    <li><img src="{%static 'image/emojies/qq_thumb.gif'%}" title="[亲亲]"></li>
                                    <li><img src="{%static 'image/emojies/sb_thumb.gif'%}" title="[生病]"></li>
                                    <li><img src="{%static 'image/emojies/mb_thumb.gif'%}" title="[太开心]"></li>
                                    <li><img src="{%static 'image/emojies/ldln_thumb.gif'%}" title="[懒得理你]"></li>
                                    <li><img src="{%static 'image/emojies/yhh_thumb.gif'%}" title="[右哼哼]"></li>
                                    <li><img src="{%static 'image/emojies/zhh_thumb.gif'%}" title="[左哼哼]"></li>
                                    <li><img src="{%static 'image/emojies/x_thumb.gif'%}" title="[嘘]"></li>
                                    <li><img src="{%static 'image/emojies/cry.gif'%}" title="[衰]"></li>
                                    <li><img src="{%static 'image/emojies/wq_thumb.gif'%}" title="[委屈]"></li>
                                    <li><img src="{%static 'image/emojies/t_thumb.gif'%}" title="[吐]"></li>
                                    <li><img src="{%static 'image/emojies/k_thumb.gif'%}" title="[打哈气]"></li>
                                    <li><img src="{%static 'image/emojies/bba_thumb.gif'%}" title="[抱抱]"></li>
                                    <li><img src="{%static 'image/emojies/angrya_thumb.gif'%}" title="[怒]"></li>
                                    <li><img src="{%static 'image/emojies/yw_thumb.gif'%}" title="[疑问]"></li>
                                    <li><img src="{%static 'image/emojies/cza_thumb.gif'%}" title="[馋嘴]"></li>
                                    <li><img src="{%static 'image/emojies/88_thumb.gif'%}" title="[拜拜]"></li>
                                    <li><img src="{%static 'image/emojies/sk_thumb.gif'%}" title="[思考]"></li>
                                    <li><img src="{%static 'image/emojies/sweata_thumb.gif'%}" title="[汗]"></li>
                                    <li><img src="{%static 'image/emojies/sleepya_thumb.gif'%}" title="[困]"></li>
                                    <li><img src="{%static 'image/emojies/sleepa_thumb.gif'%}" title="[睡觉]"></li>
                                    <li><img src="{%static 'image/emojies/money_thumb.gif'%}" title="[钱]"></li>
                                    <li><img src="{%static 'image/emojies/sw_thumb.gif'%}" title="[失望]"></li>
                                    <li><img src="{%static 'image/emojies/cool_thumb.gif'%}" title="[酷]"></li>
                                    <li><img src="{%static 'image/emojies/hsa_thumb.gif'%}" title="[花心]"></li>
                                    <li><img src="{%static 'image/emojies/hatea_thumb.gif'%}" title="[哼]"></li>
                                    <li><img src="{%static 'image/emojies/gza_thumb.gif'%}" title="[鼓掌]"></li>
                                    <li><img src="{%static 'image/emojies/dizzya_thumb.gif'%}" title="[晕]"></li>
                                    <li><img src="{%static 'image/emojies/bs_thumb.gif'%}" title="[悲伤]"></li>
                                </ul>
                            </div>
                            <!--face end-->
                        </div>
                    </div>
                {% endfor %}
            </ul>
        </div>
        <span class='submit'>发表</span>
    </li>
{% endblock comment_order %}
{% block comment_not_need_paginator %}{% endblock comment_not_need_paginator %}
{% block bottom_file %}
    <script src="{% static 'js/modal_alert.min.js' %}"></script>
    <script src="{% static 'js/comment.js' %}"></script>
{% endblock bottom_file %}